.city-box {
  position: relative;

  &-list {
    position: absolute;
    top: 37px;
    width: 100%;
    border: 1px solid #ddd;
    height: 300px;
    background: #fff;
    border-radius: 4px;
    z-index: 1;

    &-header {
      padding: 10px;

      &-search {
        width: 170px;
        margin-left: 60px;
      }
    }

    &-search {
      display: flex;
      padding: 0 10px;
      overflow: auto;
      align-content: stretch;
      justify-content: space-evenly;
      align-items: baseline;
      flex-wrap: wrap;
      cursor: pointer;

      &-item {
        width: 20px;
        height: 20px;
        text-align: center;
        cursor: pointer;
      }
    }

    .city-content {
      height: 230px;
      overflow: auto;

      .city-item {
        margin: 10px 0;
        display: flex;

        &-left {
          width: 30px;
          text-align: center;
          margin-top: 10px;
        }

        &-right {
          flex: 1;
          display: flex;
          flex-wrap: wrap;

          .item-span {
            margin: 8px 10px;
            cursor: pointer;
          }
        }
      }
    }

    .city-content::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }
}
